<template>
  <div class="tuijian">
      <ul>
          <li>
              <img :src="list1.pic" alt="">
              <p>{{list1.name}}</p>
              <p>{{list1.characteristic}}</p>
              <p>{{list1.minPrice}}</p>
          </li>
          <li>
               <img :src="list2.pic" alt="">
               <p>{{list2.name}}</p>
               <p>{{list2.characteristic}}</p>
               <p>{{list2.minPrice}}</p>
          </li>
          <li>
               <img :src="list3.pic" alt="">
               <p>{{list3.name}}</p>
               <p>{{list3.characteristic}}</p>
               <p>{{list3.minPrice}}</p>
          </li>
          <li>
               <img :src="list4.pic" alt="">
               <p>{{list4.name}}</p>
               <p>{{list4.characteristic}}</p>
               <p>{{list4.minPrice}}</p>
          </li>
      </ul>
 </div>
</template>

<script>
import { getBarGin } from '../../utils/api/home'
export default {
  name: '',
  data() { 
    return {
        list1:[],
        list2:[],
        list3:[],
        list4:[],
    }
  },
  created() {
      getBarGin().then(res =>{
         
          this.list1 = res.data[9]
          this.list2 = res.data[11]
          this.list3 = res.data[13]
          this.list4 = res.data[8]
      })
       
  },
  mounted() {
  },
  methods:{

  },
  }
</script>

<style lang='scss' scoped>
    .tuijian{
        width: 100%;
        height: 4rem;
        ul{
            width: 100%;
            height: 5rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            li{
               
                width: 46%;
                height: 100%;
                justify-content: space-around;
                img{
                    width: 100%;
                    height: 80%;
                }
                p{
                    font-size: .26rem;
                }
            }
        }
    }
</style>